<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>电商大数据管理平台</title>
	<link rel="icon" href="icon.ico">
	<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="css/dashboard.css">
	<!--[if lt IE 9]>
      <script src="plugins/html5shiv/html5shiv.min.js"></script>
	    <script src="plugins/respond/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<div id="app">
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					 aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
					<a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></a>
				</div>
				<navbars :acv='bnav'></navbars>
			</div>
		</nav>

		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-3 col-md-2 sidebar">
					<fxnav fx="0"></fxnav>
				</div>
				<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

					<div class="placeholders alert alert-info">
						<h4><img src="images/sx.png" style="margin-left: -24px;margin-top: -3px;">全市店铺汇总数量统计展示</h4>
					</div>

					<div style="text-align: left;font-size:14px;">
						<h3 style="width: 90%;padding: 10px 0;">铜仁市现有店铺总数：<span class="i-number" id="num">0</span>个</h3>
					</div>

					<div style="border: 2px solid rgba(26, 179, 255,1);box-sizing: border-box;border-top:none;border-radius:4px;overflow: hidden;">
						<h3 style="width: 100%;padding: 20px;font-size: 18px;color: white;background:linear-gradient(rgba(26, 179, 255,1),rgba(33, 140, 234,1));margin: 0;margin-bottom: 20px">铜仁市各区县店铺数量分析图表</h3>
						<div id="chart1" style="width: 100%;height:490px;margin-bottom: 40px"></div>
					</div>

				</div>
			</div>
		</div>
	</div>

	<script src="plugins/jquery/jquery.min.js"></script>
	<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="js/ie10-viewport-bug-workaround.js"></script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/nav.js"></script>
	<script src="js/common.js"></script>
	<script>
		$(document).ready(function () {
			searchData1(yue);
			$('#mySelect').change(function () {
				var p1 = $(this).children('option:selected').val();//这就是selected的值
				searchData1(p1);
			})
		})

		var yue = "2017-02";
		var area1 = new Array();
		var businessVolume1 = new Array();

		function searchData1(yue) {
			$.ajax({
				type: "get",
				url: "ebb/front/platform/count/",
				dataType: "json",
				async: true,
				success: function (data) {
					if (data != null) {
						area1 = data.addressList;
						businessVolume1 = data.platformList;
						var bb = 0;
						for (var i = 0; i < businessVolume1.length; i++) {
							var aa = businessVolume1[i];
							bb = bb + aa;
						}
						$("#num").text(bb);
						table1();
					}
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					if (XMLHttpRequest.status == 401) {
						//跳转到登录页,带上登录后的跳转地址redirect_uri=???
						// redirect_login();

						ShowTip("请先登录！", "success", 1000);
						setTimeout(function () {
							window.location.href = "login.html"
						}, 1000);
					}
				}
			});
		}
		var area2 = new Array();
		var times = new Array();
		var list1 = new Array();
		var list2 = new Array();
		var list3 = new Array();
		var list4 = new Array();
		var list5 = new Array();

		var T1 = "";
		var T2 = "";
		var T3 = "";

		var chart1 = {}
		var vm = new Vue({
			el: "#app",
			data: {
				bnav: {
					number: 2,
				}
			},
			computed: {

			},
			mounted: function () {

			},
			methods: {

			}
		});

		function table1() {
			var chart1 = echarts.init(document.getElementById('chart1'));

			var option = {
				tooltip: {
					trigger: 'axis'
				},
				color: ['#1d9ef2'],
				legend: {
					data: ['店铺数量']
				},
				dataZoom: {
					show: true,
					realtime: true,
					orient: 'vertical',
					start: 0,
					end: 100
				},
				xAxis: [
					{
						type: 'category',
						data: area1, //['碧江区','大龙经济开发区','德江县','江口县','思南县','松桃县']
						axisLabel: {
							interval: 0,
							rotate: 20 //-30度角倾斜显示
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#dddddd',
								type: 'dashed',
								width: 1
							}
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: ['rgba(144,238,144,0.05)', 'rgba(135,200,250,0.05)']
							}
						},
						axisTick: {
							alignWithLabel: true
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						name: '店铺数量',
						axisLabel: {
							formatter: '{value} 个'
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#dddfff',
								type: 'dotted',
								width: 1
							}
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: ['rgba(205,92,92,0.05)', 'rgba(255,215,0,0.05)']
							}
						}
					}
				],
				series: [
					{
						name: '店铺数量',
						type: 'bar',
						data: businessVolume1, //[5020,4900,4523,3600,2003,1600],
						barWidth: "80%",
						label: {
							normal: {
								show: true,
								position: 'top',
								textStyle:{
									color:'#323232',
									fontSize:14
								}
							}
						},
					}
				]
			};
			// 使用刚指定的配置项和数据显示图表。
			chart1.setOption(option);
		}
	</script>
</body>

</html>